<template>
  <div class="nav-container bg-w">
    <a-breadcrumb>
      <a-breadcrumb-item v-for="(item, index) in currentRoute.meta.parents" :key="index"
        :class="item.path ? 'hasPath' : ''" @click="toNavPath(item.path)">{{ item.title }}</a-breadcrumb-item>
      <a-breadcrumb-item>{{ currentRoute.meta.title }}</a-breadcrumb-item>
    </a-breadcrumb>

    <div class="clear">
      <div class="page-tabs flex-between fl" ref="pageTabsRef">
        <p class="page-tabs-btn page-tabs-btn-l flex flex-align-items-center" @mousedown="oLeftMousedown"
          @mouseup="oLeftMouseup">
          <LeftOutlined />
        </p>
        <div class="tab-list flex fl" ref="tabListRef">
          <div v-for="(item, index) in tabViews" :key="index" :class="editableTabsValue === item.name ? 'active' : ''"
            @click="tabClick(item)">
            {{ item.title }}
            <span v-if="tabViews.length > 1" @click.stop="removeTab(item.name)">
              <CloseOutlined style="font-size: 10px" />
            </span>
          </div>
        </div>
        <p class="page-tabs-btn page-tabs-btn-r flex flex-align-items-center" @mousedown="oRightMousedown"
          @mouseup="oRightMouseup">
          <RightOutlined />
        </p>
        <div class="clear-all flex flex-align-items-center" @click="clearAll">
          <img src="http://oss-cdn.mkh.cn/picture/2022-3-25/BYYDMiqF6xVSErl3c_GBH.png" /> 全部清除
        </div>
      </div>
    </div>
  </div>
</template>
<script setup>
import { defineEmits, ref, onMounted, watch } from "vue";
import { useRouter, useRoute } from "vue-router";
import Bus from "@/utils/bus";
import {
  LeftOutlined,
  RightOutlined,
  CloseOutlined,
} from "@ant-design/icons-vue";

const emit = defineEmits(['setCachedViews']);
const router = useRouter();
const route = useRoute();

let currentRoute = ref({ meta: { parent: [] } });
let tabViews = ref([]);
let editableTabsValue = ref("");
let tabs = [];
let tabListView = ref(null);
let pageTabsView = ref(null);
let timer = ref(null);
const tabListRef = ref(null);
const pageTabsRef = ref(null);

// 添加页面
const addTags = current => {
  tabViews.value = tabs;
  const tabsMenuPaths = tabViews.value.filter(
    m => m.path === current.path
  );
  const tabsMenuObj =
    tabsMenuPaths.length > 0 ? tabsMenuPaths[0] : { query: {} };

  if (current) {
    currentRoute.value = current;
  }

  if (
    tabsMenuObj.path != current.path ||
    tabsMenuObj.query.id != current.query.id
  ) {
    tabViews.value = tabViews.value.filter(
      m => m.path != current.path
    );

    const tag = {
      name: current.name,
      title: current.meta.title,
      path: current.path,
      fullPath: current.fullPath,
      query: current.query,
      params: current.params,
    };
    tabViews.value.push(tag);
    // 需要缓存的
    if (tabViews.value.includes(current.name)) {
      return;
    }
    editableTabsValue.value = tag.name;
    tabs = tabViews.value;
    setCachedViews();
  } else {
    //  已经存在的多标签页的菜单
    editableTabsValue.value = current.name;
    setTimeout(() => {
      Bus.emit("tableHeightChange", true);
    }, 10);
  }
};
// 切换页面
const tabClick = tab => {
  const latestView = tabViews.value.find(m => m.name === tab.name);
  if (latestView) {
    router.push({
      path: latestView.path,
      params: latestView.params,
      query: latestView.query,
    });
  }
};
const setCachedViews = () => {
  emit("setCachedViews", tabs);
  setTimeout(() => {
    Bus.emit("tableHeightChange", true);
  }, 10);
};
// 关闭页面
const removeTab = targetName => {
  tabs = tabViews.value;
  let activeName = editableTabsValue.value;
  if (activeName === targetName) {
    tabs.forEach((tab, index) => {
      if (tab.name === targetName) {
        const nextTab = tabs[index + 1] || tabs[index - 1];
        if (nextTab) {
          activeName = nextTab.name;
        }
      }
    });
    editableTabsValue.value = activeName;
    tabs = tabs.filter(tab => tab.name !== targetName);
    tabViews.value = tabs;
    setCachedViews();
    toLastView(activeName);
  } else {
    tabs = tabs.filter(tab => tab.name !== targetName);
    tabViews.value = tabs;
    setCachedViews();
  }
};
// 跳转最后一个页面
const toLastView = activeName => {
  const latestView = tabViews.value.find(m => m.name === activeName);
  if (latestView) {
    router.push({
      path: latestView.path,
      params: latestView.params,
      query: latestView.query,
    });
  } else {
    router.push({ name: "userAdmin" });
  }
};
// 关闭全部标签页
const clearAll = () => {
  tabViews.value = [
    {
      name: 'userAdmin',
      title: '用户管理',
      path: '/userAdmin'
    }
  ];
  tabs = tabViews.value;
  setCachedViews();
  if (route.name !== 'userAdmin') {
    router.push({ name: "userAdmin" });
  }
};
const oLeftMousedown = () => {
  timer.value = setInterval(function () {
    let dis = Number(pageTabsView.value.style.left.split("px")[0]) + 5;
    if (dis >= 5) {
      dis = 0;
    }
    tabListView.value.style.left = dis + "px";
  }, 30);
};
const oLeftMouseup = () => {
  clearInterval(timer.value);
};
const oRightMousedown = () => {
  timer.value = setInterval(function () {
    let dis = Number(pageTabsView.value.style.left.split("px")[0]) - 5;
    const max =
      pageTabsView.value.clientWidth -
      tabListView.value.clientWidth -
      65 -
      36;
    if (max >= 0) {
      dis = 0;
    } else if (dis < max) {
      dis = max;
    }
    tabListView.value.style.left = dis + "px";
  }, 30);
};
const oRightMouseup = () => {
  clearInterval(timer.value);
};
// 点击面包屑导航栏跳转页面
const toNavPath = path => {
  if (path) {
    router.push(path);
  }
}

onMounted(() => {
  tabListView.value = tabListRef.value;
  pageTabsView.value = pageTabsRef;

  Bus.on("change-nav", e => {
    removeTab(e);
  });
});
watch(() => route, to => {
  if (to.path === "/") {
    clearAll();
  } else if (to.name) {
    addTags(to);
  }
}, { immediate: true, deep: true });
</script>
<style lang="less" scoped>
.nav-container {
  padding: 12px 80px 8px 24px;
  box-shadow: 0px 2px 8px 0px rgba(0, 0, 0, 0.06);
}

/deep/.ant-breadcrumb {
  margin-bottom: 14px;

  .ant-breadcrumb-link {
    font-size: 14px;
  }

  .hasPath:hover {
    color: #4096ff;
    cursor: pointer;
  }
}

.page-tabs {
  position: relative;
  padding: 0 80px 0 18px;
  overflow: hidden;

  .page-tabs-btn {
    flex: 0 0 18px;
    height: 26px;
    padding: 0 2px;
    background: #fff;
    cursor: pointer;
    position: absolute;
    top: 0;
    z-index: 5;

    &.page-tabs-btn-l {
      left: 0;
    }

    &.page-tabs-btn-r {
      right: 65px;
    }
  }

  .tab-list {
    position: relative;

    div {
      padding: 0 16px;
      height: 26px;
      margin-right: 5px;
      font-size: 12px;
      color: #595959;
      border: 1px solid rgba(0, 0, 0, 0.15);
      border-radius: 13px;
      line-height: 24px;
      cursor: pointer;

      &.active {
        border-color: #4096ff;
        background: #4096ff;
        color: #fff;

        &>span {
          &:hover {
            background: #fff;
            color: rgba(0, 0, 0, 0.45);
          }
        }
      }

      &:hover>span {
        display: inline-block !important;
      }

      &>span {
        width: 14px;
        height: 14px;
        border-radius: 50%;
        text-align: center;
        line-height: 14px;
        display: none;

        &:hover {
          background: rgba(0, 0, 0, 0.15);
          color: #fff;
        }
      }
    }

    /deep/.ant-tag {
      border-radius: 13px;
      border: 1px solid rgba(0, 0, 0, 0.15);
      height: 26px;
      line-height: 24px;
      font-size: 12px;
      color: #595959;
      padding: 0 16px;
      margin-right: 4px;
      cursor: pointer;

      .ant-tag-close-icon {
        display: none;
        border-radius: 50%;
        padding: 2px;

        &:hover {
          background: #d9d9d9;
          color: #fff;
        }
      }

      &:hover .ant-tag-close-icon {
        display: inline-block;
      }

      &.active {
        background: #4096ff;
        color: #fff;
        border-color: #4096ff;

        .ant-tag-close-icon {
          color: #fff;

          &:hover {
            background: #fff;
            color: #939393;
          }
        }
      }
    }
  }

  .clear-all {
    position: absolute;
    right: 0;
    top: 0;
    height: 26px;
    background: #fff;
    cursor: pointer;

    img {
      width: 12px;
      margin-right: 5px;
    }

    font-size: 12px;
    color: #595959;
  }
}
</style>
